<template>
  <l-layout style="background: #f1f2f5;" :left="240">
    <template #left>
      <l-panel title="列字段" style="padding:8px 0 0 0;">
        <el-tree @check="handleColumnsCheck" default-expand-all show-checkbox ref="maintree" node-key="id"
                 :highlight-current="true" :data="columnsTree">
                    <span class="lr-tree-node" slot-scope="{ node }">
                        {{ node.label }}
                    </span>
        </el-tree>
      </l-panel>
    </template>
    <l-panel style="padding:8px 0 0 4px;">
      <template #toolLeft>
        <div class="l-panel--item" size="mini" style="margin-right:16px;">
          <span style="margin-right:8px;">{{ $t("是否分页") }}</span>
          <el-switch v-model="config.table.isPage">
          </el-switch>
        </div>
        <div class="l-panel--item" size="mini" style="margin-right:16px;">
          <span style="width: 80px;">{{ $t("排序字段") }}</span>
          <l-select size="mini" valueKey="prop" :options="columnsTree[0].children" v-model="config.table.sidx">
          </l-select>
        </div>
        <div class="l-panel--item" size="mini">
          <span style="width: 80px;">{{ $t("是否倒序") }}</span>
          <el-switch v-model="config.table.isDESC">
          </el-switch>
        </div>
        <div class="l-panel--item" size="mini">
          <span style="width: 80px;">{{ $t("批量删除") }}</span>
          <el-switch v-model="config.table.isDeleteMore" :disabled="config.moreDeleteType"/>
        </div>
      </template>
      <template #toolRight>
        <div class="l-panel--item" size="mini">
          <span style="width: 100px;">{{ $t("全选自适应宽度") }}</span>
          <el-switch v-model="isAllWidth" @change="handleAllWidth"></el-switch>
        </div>
      </template>
      <l-table
          :dataSource="config.table.columns"
          :columns="columns"
          :isSortable="true"
          rowKey="id"
          :isShowNum="false"
      >
        <template v-slot:width="scope">
          <el-input size="mini" v-model="scope.row.width"></el-input>
        </template>
        <template v-slot:isMinWidth="scope">
          <el-switch size="mini" v-model="scope.row.isMinWidth" @change="init">
          </el-switch>
        </template>
        <template v-slot:align="scope">
          <el-select size="mini" v-model="scope.row.align">
            <el-option
                v-for="item in [{value:'left',label:'左'},{value:'center',label:'中'},{value:'right',label:'右'}]"
                :key="item.value"
                :label="$t(item.label)"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
      </l-table>
    </l-panel>
  </l-layout>
</template>
<script>
export default {
  name: 'webcode-columns',
  inject: ["formConfig"],
  props: ['columnsTree'],
  components: {},
  computed: {
    config() {

      for (let i in this.formConfig.btns){

        if(this.formConfig.btns[i].id == "Delete"){
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.formConfig.moreDeleteType = false
          break
        }else {
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.formConfig.moreDeleteType = true
        }

      }

      return this.formConfig
    }
  },
  data() {
    return {
      columns: [
        {label: '列名', prop: 'label', minWidth: '150'},
        {label: '宽度', prop: 'width', width: '120', align: "center"},
        {label: '自适应宽度', prop: 'isMinWidth', width: '100', align: "center"},
        {label: '对齐', prop: 'align', width: '100', align: "center"},
      ],
      isAllWidth: false
    };
  },
  created() {
  },

  methods: {
    init() {
      if (this.config.table.columns.length > 0
          && this.config.table.columns.findIndex(t => !t.isMinWidth) == -1) {
        this.isAllWidth = true
      } else {
        this.isAllWidth = false
      }
    },
    handleColumnsCheck($node, data) {
      const addCols = data.checkedNodes.filter(t => t.prop != undefined && this.config.table.columns.findIndex(t2 => t2.prop == t.prop) == -1)
      const removeCols = this.config.table.columns.filter(t => data.checkedNodes.findIndex(t2 => t2.prop == t.prop) == -1)

      if (removeCols.length > 0) {
        this.config.table.columns = this.config.table.columns.filter(t => removeCols.findIndex(t2 => t2.prop == t.prop) == -1)
      }

      if (addCols.length > 0) {
        this.config.table.columns.push(...addCols)
      }

    },
    setCheckedKeys(keys) {
      this.$refs.maintree.setCheckedKeys(keys)
    },
    handleAllWidth() {
      this.config.table.columns.forEach(item => {
        item.isMinWidth = this.isAllWidth
      })
    }
  }

}
</script>
